<script lang="ts" setup>
import {computed, ref} from 'vue'
import {NButton, NInput, NSelect, NUpload, UploadFileInfo, useMessage} from 'naive-ui'
import type {Language, Theme} from '@/store/modules/app/helper'
import {SvgIcon} from '@/components/common'
import {useAppStore, useUserStore} from '@/store'
import type {UserInfo} from '@/store/modules/user/helper'
import {getToken} from '@/store/modules/auth/helper'
import {t} from '@/locales'

const message = useMessage()
const appStore = useAppStore()
const userStore = useUserStore()


const ms = useMessage()

const theme = computed(() => appStore.theme)

const userInfo = computed(() => userStore.userInfo)

const name = ref(userInfo.value.name ?? '')


const language = computed({
	get() {
		return appStore.language
	},
	set(value: Language) {
		appStore.setLanguage(value)
	},
})

const themeOptions: { label: string; key: Theme; icon: string }[] = [
	{
		label: 'Auto',
		key: 'auto',
		icon: 'ri:contrast-line',
	},
	{
		label: 'Light',
		key: 'light',
		icon: 'ri:sun-foggy-line',
	},
	{
		label: 'Dark',
		key: 'dark',
		icon: 'ri:moon-foggy-line',
	},
]

const languageOptions: { label: string; key: Language; value: Language }[] = [
	{label: '简体中文', key: 'zh-CN', value: 'zh-CN'},
	{label: 'English', key: 'en-US', value: 'en-US'}
]

function updateUserInfo(options: Partial<UserInfo>) {
	userStore.updateUserInfo(options)
	ms.success(t('common.success'))
}

let fileList = ref<UploadFileInfo[]>([
	{
		id: 'avatar',
		name: '头像预览',
		status: 'finished',
		url: 'http://panda-1253683406.cos.ap-guangzhou.myqcloud.com/panda/2024/01/03/0e3600b455914b0dade9943f281be19b.png'
	},
])

const token = getToken()
const headers = {
	Authorization: `Bearer ${token}`
}

function handleFinish({
												event
											}: {
	file: UploadFileInfo
	event?: ProgressEvent
}) {
	const ext = (event?.target as XMLHttpRequest).response
	fileList.value[0].url = ext;
	message.success('上传成功！')
}

</script>

<template>
	<div class="p-4 space-y-5 min-h-[200px]">
		<div class="space-y-6">
			<div class="flex items-center space-x-4">
				<span class="flex-shrink-0 w-[100px]">{{ $t('setting.avatarLink') }}</span>
				<n-upload action="/api/system/user/edit/avatar"
									:max=1
									list-type="image-card"
									:default-file-list="fileList"
									:headers="headers" @finish="handleFinish">
					点击上传
				</n-upload>
			</div>

			<div class="flex items-center space-x-4">
				<span class="flex-shrink-0 w-[100px]">{{ $t('setting.name') }}</span>
				<div class="w-[200px]">
					<NInput v-model:value="name" placeholder=""/>
				</div>
				<NButton size="tiny" text type="primary" @click="updateUserInfo({ name })">
					{{ $t('common.save') }}
				</NButton>
			</div>

			<div class="flex items-center space-x-4">
				<span class="flex-shrink-0 w-[100px]">{{ $t('setting.theme') }}</span>
				<div class="flex flex-wrap items-center gap-4">
					<template v-for="item of themeOptions" :key="item.key">
						<NButton
							size="small"
							:type="item.key === theme ? 'primary' : undefined"
							@click="appStore.setTheme(item.key)"
						>
							<template #icon>
								<SvgIcon :icon="item.icon"/>
							</template>
						</NButton>
					</template>
				</div>
			</div>
			<div class="flex items-center space-x-4">
				<span class="flex-shrink-0 w-[100px]">{{ $t('setting.language') }}</span>
				<div class="flex flex-wrap items-center gap-4">
					<NSelect
						style="width: 140px"
						:value="language"
						:options="languageOptions"
						@update-value="value => appStore.setLanguage(value)"
					/>
				</div>
			</div>

		</div>
	</div>
</template>
